<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <title>简历</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
<article>
    <section class="bio">
        <h1>李齐一</h1>
        <img src="./images/picture.jpg" alt="" height="100">
        <p>
            男 | 27岁 | 前端开发工程师 | 西安
        </p>
        <p>
            手机：<a href="tel:13201759671">13201759671</a> | 微信：13201759671 | 邮箱：<a
            href="mailto:llqiyi@outlook.com">llqiyi@outlook.com</a>
        </p>
        <p>毕业院校：西安航空学院 | 本科 | 测控技术与仪器</p>
    </section>
    <section class="jobs">
        <h2>工作经历</h2>
        <ol>
            <li>
                <header>
                    <h4>北京星华惠康科技股份有限公司</h4>
                    <span><time>2020年3月</time>~<time>至今</time></span>
                </header>
                <ul>
                    <li>负责开发公司的前端应用，包括pc管理端、移动、小程序等，参与程序设计工作。</li>
                    <li>与产品经理和UI设计师合作，确保产品的可用性和用户友好性。</li>
                    <li>负责协调团队成员并与后端开发人员密切合作，以确保前后端代码的协调和一致性。</li>
                    <li>
                        根据需求文档实现网站和应用程序的用户界面与交互，添加相应的动画效果等，并保持响应式设计和跨浏览器兼容性。
                    </li>
                    <li>帮助团队成员使用React.js框架开发网站和Web应用程序，在成员遇到问题时提供支持。</li>
                    <li>分析和解决网站和应用程序的问题，与团队合作制定解决方案并实施。</li>
                    <li>封装常用组件，优化代码逻辑，提高页面性能。</li>
                </ul>
            </li>
        </ol>
    </section>
    <section class="projects">
        <h2>项目经历</h2>
        <ol>
            <li>
                <header>
                    <h3>疫情隔离管理系统</h3>
                </header>
                <div class="part">
                    <p>作为该项目的核心开发者，我独立负责了隔离人员管理、患者管控信息流调、隔离登记、转运任务调度等关键模块的开发。</p>
                    <p>还负责移动端的司机接单、患者入住登记、健康信息上报等功能模块。</p>
                    <p>在技术栈方面，我使用了 <strong>React</strong> 、 <strong>Antd</strong> 、 <strong>Hooks</strong>，并通过 <strong>WebSocket</strong> 实现前后端通信。</p>
                </div>
                <div class="part">
                    <p>在这个项目中，我不仅独立负责了关键模块的开发，还深入研究了 React 的 <strong>性能优化</strong>，如使用 useMemo 和 useCallback 避免不必要的重新渲染。</p>
                    <p>此外，我还针对<strong>页面性能</strong>、代码质量等做了相对应的优化。</p>
                </div>
                <!--<p>分为pc管理端与手机移动端。</p>
                <p>
                    其中管理端大致分为疾控卫健角色、转运系统角色、隔离点角色等。疾控健委角色负责对患者的信息流调、管控分配、下发转运等；转运中心角色根据接收下发的转运函生成转运单、分配司机、指定隔离点等；隔离点角色负责接收患者、分配房间、患者健康信息检测等，以及对隔离房间、楼层等信息的维护。
                </p>
                <p>
                    移动端分为司机端、患者端以及隔离点管理端。司机端含有接收转运单、接送患者到隔离点交接等功能；患者端包含上车登记、入住登记、健康信息填报等功能；隔离点管理端负责录入患者并分配房间信息，以及后续核酸采样工作安排等功能。
                </p>
                <p>
                    在该项目中独立负责开发隔离人员管理、患者管控信息流调、隔离登记、转运任务调度，移动端的司机接单、患者入住登记、健康信息上报等模块。
                </p>
                <p>
                    该项目页面开发使用的技术栈主要为 <strong>React</strong> 、 <strong>Antd</strong> 、 <strong>Hooks</strong>， 以 <strong>WS</strong> 作为前后端通信。
                </p>-->
            </li>
            <li>
                <header>
                    <h3>排班预约叫号系统</h3>
                </header>
                <div class="part">
                    <p>负责服务管理中心、排班概览、排队叫号等功能模块的维护和更新。</p>
                    <p>技术栈方面，我使用了 <strong>React</strong> + <strong>Redux</strong> + <strong>Antd</strong>，并采用 <strong>WebSocket</strong> 实现医生端与排队叫号 PC 端的实时通信。</p>
                </div>
                <div class="part">
                    <p>在这个项目中，我深入了解了 Redux 的原理和实现，熟练掌握了 Redux 的中间件机制，优化了状态管理的性能。</p>
                    <p>掌握了 CSS 预处理器（如 less）的使用，提高了样式编写的效率和可维护性。</p>
                </div>
<!--                <p>在 WebSocket 通信方面，我实现了一套心跳机制，确保连接的稳定性。</p>-->

                <!--<p>该项目含有门诊排班、排队叫号、服务管理等模块。</p>
                <p>其中服务管理模块用来维护门诊排班叫号所用到的服务、以及医生科室信息等。</p>
                <p>
                    排班模块则可以根据现有的班次信息、诊室、以及关联的服务等，来制定门诊班表计划，发布之后即可生成可供预约的号源。
                </p>
                <p>
                    排队叫号则是根据已发布的号源、服务等生成不同的队列；含有分诊屏可以用来展示队列信息，以及展示医生端发出的叫号信息等；相对的医生端则是展示自己所负责的服务队列，队列中为通过预约或门诊指定的患者信息，可以对患者进行叫号操作。
                </p>
                <p>在该项目中负责对以上功能模块的维护、更新功能等。</p>
                <p>使用到的技术栈为 <strong>React</strong> + <strong>Redux</strong> + <strong>Antd</strong>，采用 <strong>WS</strong> 作为医生端与排队叫号pc端的即时通讯方式。</p>-->
            </li>
            <li>
                <header>
                    <h3>健康广场小程序</h3>
                </header>
                <div class="part">
                    <p>此项目包含患者的预约挂号、在线问诊、疫苗预约等功能。我主要负责疫苗预约模块。</p>
                    <p>此模块包含社区查找、疫苗查找、疫苗登记、预约时间、登记公示、预约记录等功能。</p>
                    <p>在这个项目中，我熟练掌握了 uniapp 的跨平台开发技巧，实现了高度复用的组件和逻辑。</p>
                    <p>同时还深入了解了小程序的性能优化策略，如使用虚拟列表和图片懒加载，提高了应用的性能。</p>
                </div>
            </li>
            <li>
                <header>
                    <h3>医院大屏展示项目</h3>
                </header>
                <p>在这个项目中，我负责了医院信息简介、科室专家信息、门诊科室排班、门诊流量统计、医院消毒系统展示等模块的开发。</p>
                <div class="part">
                    <p>实现 <strong>echarts</strong> 的定制化能力，完成高度个性化的图表展示。</p>
                    <p>在响应式布局方面，我熟练应用了媒体查询和 Flexbox 布局，实现了多种设备的适配。</p>
                </div>
            </li>
            <li>
                <header>
                    <h3>小喵记账</h3>
                </header>
                <p>这是一个完全由我独立开发的项目，包括前后端的搭建和部署</p>
                <div class="part">
                    <p>前端方面使用到了 <strong>Vue3</strong> + <strong>Vite</strong> + <strong>Tsx</strong> + <strong>Pinia</strong> 的一个组合，样式方面采用 <strong>CSS Modules</strong>，采用 <strong>JWT</strong> 作为登录方案。</p>
                    <p>使用了 <strong>VueRouter</strong> 中的路由守卫做登录鉴权，封装了一些常用的组件与函数等，在统计图表上，使用了 <strong>echarts</strong> 组件。</p>
                </div>
                <div class="part">
                    <p>后端方面使用到了 <strong>Ruby</strong> + <strong>Rails</strong> 的搭配。</p>
                    <p>整个API采用 <strong>Restful</strong> 风格，基于<strong>测试驱动开发</strong>，实现JWT登录，使用到了<strong>中间件鉴权</strong>，采用 <strong>Docker</strong> 对项目进行容器化。</p>
                </div>
                <div class="part">
                    <p>在这个项目中，我深入研究了 Vue3 的 <strong>Composition API</strong>，实现了高度复用的逻辑和组件。</p>
                    <p>同时，我还掌握了 Vite 的<strong>插件机制</strong>，优化了构建速度和产出质量。</p>
                    <p>在 TypeScript 方面，我充分利用了类型推导和类型保护，提高了代码的健壮性。</p>
                </div>
               <!-- <p>
                    此项目采用前后端分离的方式开发，且前端后端都是自己从零搭建到部署上线的。
                </p>
                <p>
                    前端方面使用到了 <strong>Vue3</strong> + <strong>Vite</strong> + <strong>Tsx</strong> + <strong>Pinia</strong> 的一个组合，样式方面采用 <strong>CSS Modules</strong>，采用 <strong>JWT</strong> 作为登录方案，使用了 <strong>VueRouter</strong> 中的路由守卫做登录鉴权，封装了一些常用的组件与函数等，在统计图表上，使用了 <strong>echarts</strong> 组件。
                </p>
                <p>
                    后端方面使用到了 <strong>Ruby</strong> + <strong>Rails</strong> 的搭配。整个API采用 <strong>Restful</strong> 风格，基于测试驱动开发，实现JWT登录，使用到了中间件鉴权，采用 <strong>Docker</strong> 对项目进行容器化。
                </p>-->
                <span>
                  <a href="https://github.com/qiyi-li/miao-fe">前端源码链接</a>
                  <a href="https://github.com/qiyi-li/miao-be">后端源码链接</a>
                  <a href="http://162.14.67.92:8080/#/items">项目预览</a>
                </span>
            </li>
            <li>
                <header>
                    <h3>SSR个人博客</h3>
                </header>
                <div class="part">
                    <p>此项目是一个基于 <strong>Next</strong> + <strong>typeorm</strong> 开发的服务端渲染的项目。</p>
                    <p>数据库搭配上使用了 <strong>postgresql</strong>。登录采用了传统的 <strong>cookie</strong> 方式。</p>
                </div>
                <div class="part">
                    <p>在这个项目中，我深入了解了 Next.js 的服务端渲染原理和优化策略，如使用 getStaticProps 和 getServerSideProps 实现数据预加载。</p>
                    <p>同时，我还掌握了 typeorm 的高级特性，如事务处理和懒加载关联。</p>
                </div>
<!--                <p>在安全方面，我实现了 CSRF 防护和 XSS 防护策略，确保了应用的安全性。</p>-->
                <span>
                  <a href="https://github.com/qiyi-li/next-blog">源码链接</a>
                  <a href="http://http://162.14.67.92:4000/">项目预览</a>
                </span>
            </li>

        </ol>
    </section>
    <section class="skills">
        <h2>掌握技能</h2>
        <div class="wrapper">
            <ul>
                <li>熟悉 <strong>前后端分离</strong> 技术，包括 AXIOS、跨域、前端路由、Cookie、Session、JWT 等</li>
                <li>熟悉通过 Ruby on Rails 实现增删改查接口</li>
                <li>熟悉后端开发流程，测试驱动开发、文档撰写规范等</li>
                <li>熟悉 Restful API 设计原则和规范</li>
                <li>了解容器化，熟悉常见 Nginx 配置等</li>
                <li>熟练掌握 <strong>Vue全家桶</strong> 的使用，包括 VueCli、VueRouter、Vite、Pinia 等</li>
                <li>熟练掌握 <strong>React全家桶</strong> 的使用，包括 create-react-app、ReactRouter、Hooks、Redux 等</li>
                <li>熟悉 <strong>ES6</strong>，包括 let / Promise / await / 解构赋值等</li>
                <li>熟练使用 Antd 等常用的组件库，快速完成开发任务，熟悉 <strong>echarts</strong> 数据展示工具的使用</li>
                <li>熟悉 <strong>Webpack、Vite</strong> 的配置和优化</li>
                <li>熟悉 <strong>TypeScript</strong>，熟悉 <strong>Ruby on Rails</strong>、<strong>Nextjs</strong> 的使用</li>
            </ul>
        </div>
    </section>
<!--    <section class="others">
        <h2>其他链接</h2>
        <ul>
            <li>
                <a href="https://github.com/qiyi-li">我的 GitHub</a>，有一些小项目
            </li>
            <li>
                <a href="https://www.yuque.com/books/share/fcc17b53-db93-48c0-bba1-d0033db376e7?#">我的博客</a>，总结了一些学习过程中遇到的问题
            </li>
        </ul>
    </section>-->

</article>
<script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
<script src="./main.js"></script>
</body>
</html>
